<html>
<head>
    <title>SIMILE | Timeline</title>
    <link rel='stylesheet' href='styles.css' type='text/css' />
    <link rel="alternate" type="application/rdf+xml" href="doap.rdf" />
    
    <script src="api/timeline-api.js" type="text/javascript"></script>
    <script>
        var tl;
        function onLoad() {
            var eventSource = new Timeline.DefaultEventSource();
            
            var zones = [
                {   start:    "Fri Nov 22 1963 00:00:00 GMT-0600",
                    end:      "Mon Nov 25 1963 00:00:00 GMT-0600",
                    magnify:  10,
                    unit:     Timeline.DateTime.DAY
                },
                {   start:    "Fri Nov 22 1963 09:00:00 GMT-0600",
                    end:      "Sun Nov 24 1963 00:00:00 GMT-0600",
                    magnify:  5,
                    unit:     Timeline.DateTime.HOUR
                },
                {   start:    "Fri Nov 22 1963 11:00:00 GMT-0600",
                    end:      "Sat Nov 23 1963 00:00:00 GMT-0600",
                    magnify:  5,
                    unit:     Timeline.DateTime.MINUTE,
                    multiple: 10
                },
                {   start:    "Fri Nov 22 1963 12:00:00 GMT-0600",
                    end:      "Fri Nov 22 1963 14:00:00 GMT-0600",
                    magnify:  3,
                    unit:     Timeline.DateTime.MINUTE,
                    multiple: 5
                }
            ];
            var zones2 = [
                {   start:    "Fri Nov 22 1963 00:00:00 GMT-0600",
                    end:      "Mon Nov 25 1963 00:00:00 GMT-0600",
                    magnify:  10,
                    unit:     Timeline.DateTime.WEEK
                },
                {   start:    "Fri Nov 22 1963 09:00:00 GMT-0600",
                    end:      "Sun Nov 24 1963 00:00:00 GMT-0600",
                    magnify:  5,
                    unit:     Timeline.DateTime.DAY
                },
                {   start:    "Fri Nov 22 1963 11:00:00 GMT-0600",
                    end:      "Sat Nov 23 1963 00:00:00 GMT-0600",
                    magnify:  5,
                    unit:     Timeline.DateTime.MINUTE,
                    multiple: 60
                },
                {   start:    "Fri Nov 22 1963 12:00:00 GMT-0600",
                    end:      "Fri Nov 22 1963 14:00:00 GMT-0600",
                    magnify:  3,
                    unit:     Timeline.DateTime.MINUTE,
                    multiple: 15
                }
            ];
            
			
			
            var theme = Timeline.ClassicTheme.create();
			Timeline.ThemeName = 'dark-theme'
			
            theme.event.bubble.width = 250;
            theme.mouseWheel='zoom';
			
            var date = "Fri Nov 22 1963 13:00:00 GMT-0600"
            var bandInfos = [
                Timeline.createHotZoneBandInfo({
                    width:          "80%", 
                    intervalUnit:   Timeline.DateTime.WEEK, 
                    intervalPixels: 200,
                    zones:          zones,
                    eventSource:    eventSource,
                    date:           date,
                    timeZone:       -6,
                    theme:          theme
                }),
                Timeline.createHotZoneBandInfo({
                    width:          "20%", 
                    intervalUnit:   Timeline.DateTime.MONTH, 
                    intervalPixels: 200,
                    zones:          zones2, 
                    eventSource:    eventSource,
                    date:           date, 
                    timeZone:       -6,
                    overview:       true,
                    theme:          theme
                })
            ];
            bandInfos[1].syncWith = 0;
            bandInfos[1].highlight = true;
            
            for (var i = 0; i < bandInfos.length; i++) {
                bandInfos[i].decorators = [
                    new Timeline.SpanHighlightDecorator({
                        startDate:  "Fri Nov 22 1963 12:30:00 GMT-0600",
                        endDate:    "Fri Nov 22 1963 13:00:00 GMT-0600",
                        color:      "#FFC080",
                        opacity:    50,
                        startLabel: "shot",
                        endLabel:   "t.o.d.",
                        theme:      theme,
						cssClass: 't-highlight1'
                    }),
                    new Timeline.PointHighlightDecorator({
                        date:       "Fri Nov 22 1963 14:38:00 GMT-0600",
                        color:      "#FFC080",
                        opacity:    50,
                        theme:      theme,
						cssClass: 'p-highlight1'
                    }),
                    new Timeline.PointHighlightDecorator({
                        date:       "Sun Nov 24 1963 13:00:00 GMT-0600",
                        color:      "#FFC080",
                        opacity:    50,
                        theme:      theme
                    })
                ];
            }
            
            tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);
            tl.loadXML("examples/jfk/jfk.xml", function(xml, url) { eventSource.loadXML(xml, url); });
        }
        
        var resizeTimerID = null;
        function onResize() {
            if (resizeTimerID == null) {
                resizeTimerID = window.setTimeout(function() {
                    resizeTimerID = null;
                    tl.layout();
                }, 500);
            }
        }
		
		
		function themeSwitch(){
			var timeline = document.getElementById('tl');		
			timeline.className = (timeline.className.indexOf('dark-theme') != -1) ? timeline.className.replace('dark-theme', '') : timeline.className += ' dark-theme';
			
		}
    </script>
	<style type="text/css">
		
		#switch_theme{margin-left:2em; cursor:pointer; background:#eee; padding:4px 6px; width:120px; text-align:center; font-weight:bold; border:1px solid #999;}
		
		.t-highlight1{background-color:#ccf;}
		.p-highlight1{background-color:#fcc;}
		
		.timeline-highlight-label-start .label_t-highlight1{color:#f00;}
		.timeline-highlight-label-end .label_t-highlight1{color:#aaf;}
		
		.timeline-band-events .important{color:#f00;}		
		.timeline-band-events .small-important{background:#c00;}
		
		
		/*---------------------------------*/
		
		.dark-theme {color:#eee;}
		.dark-theme .timeline-band-0 .timeline-ether-bg{background-color:#333}
		.dark-theme .timeline-band-1 .timeline-ether-bg{background-color:#111}
		.dark-theme .timeline-band-2 .timeline-ether-bg{background-color:#222}
		.dark-theme .timeline-band-3 .timeline-ether-bg{background-color:#444}
		
		
		.dark-theme .t-highlight1{background-color:#003;}
		.dark-theme .p-highlight1{background-color:#300;}
		
		.dark-theme .timeline-highlight-label-start .label_t-highlight1{color:#f00;}
		.dark-theme .timeline-highlight-label-end .label_t-highlight1{color:#115;}
		
		.dark-theme .timeline-band-events .important{color:#c00;}		
		.dark-theme .timeline-band-events .small-important{background:#c00;}
		
		.dark-theme .timeline-date-label-em{color:#fff;}
		.dark-theme .timeline-ether-lines{border-color:#555; border-style:solid;}
		.dark-theme .timeline-ether-highlight{background:#555;}
		
		.dark-theme .timeline-event-tape,
		.dark-theme .timeline-small-event-tape{background:#f60;}
		.dark-theme .timeline-ether-weekends{background:#111;}
	</style>
</head>
<body onload="onLoad();" onresize="onResize();">
<!--#include virtual="sidebar.html" -->
<ul id="path">
  <li><a href="http://simile.mit.edu/" title="Home">SIMILE</a></li>
  <li><span>Timeline</span></li>
</ul>

<div id="body">
    <h1>Timeline</h1>
    <p>Timeline is a DHTML-based AJAXy widget for visualizing time-based events.
        It is like <a href="http://maps.google.com/">Google Maps</a> for time-based information.
        Below is a live example that you can play with. Pan the timeline by
        dragging it horizontally or using your mouse-wheel. Click on an event icon or tape 
        for details on the event. The arrow keys can also be used to navigate the timeline.
    </p>

	<div id="switch_theme" onclick="themeSwitch();">Switch theme</div>
    <div id="tl" class="timeline-default dark-theme" style="height: 350px; margin: 2em;">
    </div>
    
    <p>Just like Google Maps, Timeline can be used with zero software installation,
        server-side or client-side. And like Google Maps, you can populate Timeline
        with data by pointing it to an XML file (here is the 
        <a href="examples/jfk/jfk.xml">data file</a> for the timeline above).
        But Timeline is not limited to only that means of loading data; for instance,
        we have just added <a href="examples/cubism/cubism.html">JSON support</a>.
    </p>
    
    <h2>Live Examples</h2>
    <ul>
        <li><a href="examples/religions/religions.html">Religion Timelines</a>:
            recommended to be viewed on a <em>huge monitor</em>, 
            2000 years of Jewish and Christianity history, all
            mashed up, scrolling side-by-side.
        </li>
        
        <!-- 
        Dinos are no longer working...
        <li><a href="examples/dinosaurs/dinosaurs2.html">Dinosaurs</a>:
            recommended to be viewed on a huge monitor, showing Timeline
            working on geological scale events.
        </li>
        -->
        
        <li>Additional <a href="examples/">examples</a></li>
    </ul>

    <h2>Related Projects</h2>
    <ul>
        <li><a href="http://simile.mit.edu/exhibit/">Exhibit</a>: a lightweight structured data
            publishing framework that is entirely Javascript-based&mdash;you can make nice
            time lines and maps without ever touching a database or even setting up a web server.
        </li>
    </ul>
        
    <h2>Documentation</h2>
    <ul>
        <li>Documentation: read and contribute to Timeline's
          <a href="http://code.google.com/p/simile-widgets/wiki/Timeline">wiki</a>
        </li>
        
        <li>Older documentation from version 1 is available
          <a href="docs/">here</a> and <a href="http://simile.mit.edu/wiki/Timeline">here</a>
         </li>
        <li><a href="http://code.google.com/p/simile-widgets/source/browse/">Source Code</a>
          on SVN repository
        </li>
    </ul>
    
    <h2>Mailing list / Feedback / Contribute</h2>
    <ul>
        <li>Send questions/comments/ideas/discussions/etc. to our 
            <a href="http://groups.google.com/group/simile-widgets/">Google groups mailing list</a>
        </li>
        <li>View and add enhancement ideas / bugs / issues in our 
          <a href="http://code.google.com/p/simile-widgets/issues">issue tracker</a>
        </li>
    </ul>
    
    <h2>Licensing</h2>
    <p>Timeline is open source software and is licensed under the 
        <a href="http://simile.mit.edu/license.html">BSD license</a>.</p>
    </p>
    
    <h2>Credits</h2>
    <p>This software is sponsored by <a href="http://mellon.org/">The Andrew W. Mellon Foundation</a>
        and is maintained by the SIMILE project, in particular:
        <ul>
            <li><a href="http://people.csail.mit.edu/people/dfhuynh/">David Fran&ccedil;ois Huynh</a>,
                dfhuynh at csail.mit.edu
            </li>
        </ul>
    </p>
</body>
</html>
